<template>
  <section class="padding EndWaybillList">
    <el-card>
      <div slot="header" class="clearfix relative ">
        <span class="title-icon">收款账户管理</span>
        <div class="absolute add-btn-box">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            :disabled="AccountList.length >= 10"
            @click="dialogFormVisible = true"
          >
            新增
          </el-button>
        </div>
      </div>

      <el-row :gutter="10">
        <el-col
          v-for="(item, index) in AccountList"
          :key="index"
          :md="24"
          :lg="12"
        >
          <div
            class="my-profile-info-box flex justify-between"
            :class="{ 'border-green': item.isDefault === 1 }"
          >
            <div class="" style="width:90%">
              <el-row>
                <el-col :lg="12">
                  <div class="margin-bottom text-cut">
                    收款人：{{ item.payee }}
                  </div>
                </el-col>
                <el-col :lg="12">
                  <div class="margin-bottom text-cut">
                    账户类型：{{ serverAccountTypeMap[item.accountType] }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="12">
                  <div class="margin-bottom text-cut">
                    收款银行：{{ item.payBank }}
                  </div>
                </el-col>
                <el-col :lg="12">
                  <div class="margin-bottom text-cut">
                    银行账号：{{ item.bankAccount }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="12">
                  <div class="margin-bottom text-cut">
                    银行地址：{{ item.bankAddress }}
                  </div>
                </el-col>
                <el-col :lg="12">
                  <div class="margin-bottom text-cut">
                    收款银行 SWIFT CODE：{{ item.payBankSwiftCode }}
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="flex justify-between flex-direction">
              <div
                class="pointer"
                :class="item.isDefault === 1 ? 'text-green' : 'text-red'"
                @click="changeDefault(index)"
              >
                {{ item.isDefault === 1 ? "默认地址" : "设为默认" }}
              </div>
              <div class="text-lg">
                <el-tooltip content="编辑" effect="light" placement="top-end">
                  <i
                    class="el-icon-edit-outline pointer margin-right"
                    @click="editInfo(index)"
                  />
                </el-tooltip>
                <el-tooltip content="删除" effect="light" placement="top-end">
                  <i class="el-icon-delete pointer" @click="delInfo(index)" />
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
      title="新增收款账户"
      width="70%"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        label-width="100px"
        size="mini"
        :model="form"
        class="padding-lr-40"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="payee" label="收款人">
              <el-input
                v-model="form.payee"
                placeholder="请填写收款人"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="type" label="账户类型">
              <el-select
                v-model="form.accountType"
                placeholder="请选择账户类型"
              >
                <el-option v-for="(item,value) in serverAccountTypeMap" :key="value" :label="item" :value="value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="payBank" label="收款银行">
              <el-input
                v-model="form.payBank"
                placeholder="请填写收款银行"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="bankAccount" label="银行账号">
              <el-input
                v-model="form.bankAccount"
                placeholder="请填写银行账号"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="bankAddress" label="银行地址">
              <el-input
                v-model="form.bankAddress"
                placeholder="请填写银行地址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="payBankSwiftCode" label="收款银行 SWIFT CODE">
              <el-input
                v-model="form.payBankSwiftCode"
                placeholder="请填写收款银行 SWIFT CODE"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="isDefault" label="是否默认">
              <el-radio-group v-model="form.isDefault">
                <el-radio :label="parseInt(1)">是</el-radio>
                <el-radio :label="parseInt(0)">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">{{
          editType === "add" ? "立即创建" : "保存"
        }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import { clone } from "@/utils/clone";

export default {
  props: ["data"],

  data() {
    return {
      editType: "add",
      dialogFormVisible: false,
      serverAccountTypeMap: {},
      pid: "",
      form: {
        id: "",
        payee: "",
        accountType: "",
        payBank: "",
        bankAccount: "",
        bankAddress: "",
        payBankSwiftCode: "",
        isDefault: "",
        serverId: ""
      },
      AccountList: [],
      rules: {
        payee: [
          { required: true, message: "请填写收款人", trigger: "blur" }
        ],
        accountType: [
          { required: true, message: "请填写账户类型", trigger: "blur" }
        ],
        payBank: [
          { required: true, message: "请选择收款银行", trigger: "blur" }
        ],
        bankAccount: [
          { required: true, message: "请填写银行账号", trigger: "blur" }
        ],
        bankAddress: [
          { required: false, message: "请填写银行地址", trigger: "blur" }
        ],
        payBankSwiftCode: [
          { required: false, message: "请填写收款银行SWIFT CODE", trigger: "blur" }
        ],
        isDefault: [
          { required: true, message: "请选择是否默认", trigger: "chenge" }
        ]
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.pid = this.$route.query.pid;
      ajax("listAccount", { serverId: this.pid },{
        class: "com.tofba.app.client.setting.ServeCompanyAccountClient"
      }).then(
        res => {
          if (res.code == 200) {
            this.AccountList = res.data;
            this.serverAccountTypeMap = res.data2;
          } else {
            this.$message.error("数据异常");
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    addInfo() {
      this.editType = "add";
      this.dialogFormVisible = true;
    },
    editInfo(index) {
      this.editType = "edit";
      this.dialogFormVisible = true;
      // 表达回显重置前提条件
      this.$nextTick(function() {
        this.form = clone(this.AccountList[index]);
      });
    },
    async saveInfo() {
      this.form.serverId = parseInt(this.pid);
      ajax("save", this.form, {
        class: "com.tofba.app.client.setting.ServeCompanyAccountClient"
      }).then(
        res => {
          if (res.code == 200) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.init();
            this.dialogFormVisible = false;
          } else {
            setTimeout(() => {
              this.form = {
                id: "",
                payee: "",
                accountType: "",
                payBank: "",
                bankAccount: "",
                bankAddress: "",
                payBankSwiftCode: "",
                isDefault: "",
                serverId: ""
              };
            }, 1000);
            this.$message.error(res.message);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    async delInfo(index) {
      this.$confirm("确认删除？")
        .then(_ => {
          ajax(
            "delete",
            { id: this.AccountList[index].id,serverId: parseInt(this.pid)},
            { class: "com.tofba.app.client.setting.ServeCompanyAccountClient" }
          ).then(
            res => {
              if (res.code === 200) {
                this.$message({
                  message: "已删除",
                  type: "success"
                });
                this.init();
              } else {
                this.$message.error(res.message);
              }
            },
            error => {
              console.log(error);
            }
          );
        })
        .catch(_ => {});
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
          this.resetForm("ruleForm");
        })
        .catch(_ => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveInfo();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.form = {
        id: "",
        payee: "",
        accountType: "",
        payBank: "",
        bankAccount: "",
        bankAddress: "",
        payBankSwiftCode: "",
        isDefault: "",
        serverId: ""
      };
      this.$refs[formName].resetFields();
      console.log(this.form);
    },
    changeDefault(index) {
      this.$confirm("是否将此地址设为默认地址?", "确认操作", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      })
        .then(() => {
          this.form = this.AccountList[index];
          this.form.isDefault = 1;
          this.saveInfo();
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.EndWaybillList >>> .el-textarea__inner {
  min-height: 60px !important;
}
</style>

<style lang="scss" scoped>
.item {
  position: absolute;
  right: -25px;
  top: 3px;
  font-size: 20px;
}
.add-btn-box {
  right: 0;
  top: -6px;
}
</style>
